<%@page import="java.net.URLEncoder"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ include file="/common/include/page.jsp"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>${requestScope.goodsCate.name}下面的商品 - SXT商城</title>
	<%@ include file="/common/include/title.jsp"%>
	<link type="text/css" href="${rootPath }/css/list.css" rel="stylesheet" />
	
	<script type="text/javascript">
		var timeout = 500;
		var closetimer = 0;
		var ddmenuitem = 0;
	
		$(document).ready(function() {
			$('.cat_item').mousemove(function() {
				$(this).addClass('cat_item_on');
			});
			$('.cat_item').mouseleave(function() {
				$(this).removeClass('cat_item_on');
			});
			$('#slideshow').imgSlideShow({
				itemclass : 'i'
			})
			$("#slide-qg").switchTab({
				titCell : "dt a",
				trigger : "mouseover",
				delayTime : 0
			});
			$("#s_cart_nums1").hover(function() {
				mcancelclosetime();
				if (ddmenuitem)
					ddmenuitem.hide();
				ddmenuitem = $(document).find("#s_cartbox");
				ddmenuitem.fadeIn();
			}, function() {
				mclosetime();
			});
			$("#s_cart_nums2").hover(function() {
				mcancelclosetime();
				if (ddmenuitem)
					ddmenuitem.hide();
				ddmenuitem = $(document).find("#s_cartbox");
				ddmenuitem.fadeIn();
			}, function() {
				mclosetime();
			});
			$("#s_cartbox").hover(function() {
				mcancelclosetime();
			}, function() {
				mclosetime();
			});
			var $cur = 1;
			var $i = 4;
			var $len = $('.hot_list>ul>li').length;
			var $pages = Math.ceil($len / $i);
			var $w = $('.hotp').width() - 66;
	
			var $showbox = $('.hot_list');
	
			var $pre = $('div.left_icon');
			var $next = $('div.rgt_icon');
	
			$pre.click(function() {
				if (!$showbox.is(':animated')) {
					if ($cur == 1) {
						$showbox.animate({
							left : '-=' + $w * ($pages - 1)
						}, 500);
						$cur = $pages;
					} else {
						$showbox.animate({
							left : '+=' + $w
						}, 500);
						$cur--;
					}
	
				}
			});
	
			$next.click(function() {
				if (!$showbox.is(':animated')) {
					if ($cur == $pages) {
						$showbox.animate({
							left : 0
						}, 500);
						$cur = 1;
					} else {
						$showbox.animate({
							left : '-=' + $w
						}, 500);
						$cur++;
					}
	
				}
			});
	
		});
		function mclose() {
			if (ddmenuitem)
				ddmenuitem.hide();
		}
		function mclosetime() {
			closetimer = window.setTimeout(mclose, timeout);
		}
		function mcancelclosetime() {
			if (closetimer) {
				window.clearTimeout(closetimer);
				closetimer = null;
			}
		}
		
		
		/* 为添加购物车拼装returnUrl */
		function proccedReturnUrl(usersCarAId)
		{
			/*  alert('------');  */
			/*
				~取到a链接对应的href,
				~在href上面增加returnUrl
				~返回true
			*/
			/* alert($("#" + usersCarAId).attr("href")); */
			/*添加和拼装url需要关注一下步骤
			1：获取一个动态的id
			2：获取到当前的http里面的地址window.location.href,并用 encodeURIComponent进行编码为UTF-8的形式
			3：首先进行的是url，之后进行的是controller里面的方法*/
			var href = $("#" + usersCarAId).attr("href") ; 
			href += "&returnUrl=" + encodeURIComponent(window.location.href,"UTF-8");
			/*  alert("href====" + href + "----" + encodeURI("http://www.baidu.com?id=10&b=20&测试一下","UTF-8")) ; */
			//window.location.href = href ; 
			/*为href赋值，可以利用该方法*/
			$("#" + usersCarAId).attr("href",href);
			return true ; 
		}
	</script>
	</head>
	
	<body>
		<div id="doc">
			<%@ include file="/common/include/header.jsp"%>
			<div id="s_bdw">
				<div id="s_bd">
					<div class="zadv">
						<a href="#"><img src="images/3215wa.jpg" width="980"
							height="62" alt="" /></a>
					</div>
	
					<div class="breadcrumbs">
						<div class="f-l">
							<a href="#">全部结果</a><span>»</span><a href="#">食品、饮料、酒水</a><span>»</span><a
								href="#">进口食品</a><span>»</span>进口米
						</div>
						<div class="f-r">
							搜索结果(<b class="red">19</b>)
						</div>
					</div>
	
					<div class="f-l leftlist">
						<div class="sort">
							<h2>筛选分类</h2>
							<h3>
								<a href="#">大家电、生活电器(3890)</a>
							</h3>
							<dl>
								<dt>
									<a href="#">厨房电器(1001)</a>
								</dt>
								<dd>
									<span>豆浆机(85)</span> <a href="#">微波炉(35)</a> <a href="#">电压力锅(181)</a>
									<a href="#">电水壶/热水瓶(144)</a> <a href="#">电磁炉(53)</a> <a href="#">多用途锅(78)</a>
									<a href="#">电饼铛/煎拷机(3)</a> <a href="#">煮蛋器(34)</a>
								</dd>
							</dl>
							<h3>
								<a href="#">大家电、生活电器(3890)</a>
							</h3>
							<dl>
								<dt>
									<span>厨房电器(1001)</span>
								</dt>
								<dd>
									<a href="#">豆浆机(85)</a> <a href="#">微波炉(35)</a> <a href="#">电压力锅(181)</a>
									<a href="#">电水壶/热水瓶(144)</a> <a href="#">电磁炉(53)</a> <a href="#">多用途锅(78)</a>
									<a href="#">电饼铛/煎拷机(3)</a> <a href="#">煮蛋器(34)</a>
								</dd>
							</dl>
						</div>
						<!--sort end-->
	
						<div class="ladv">
							<a href="#"><img src="images/2asd.jpg" width="205" height="72"
								alt="" /></a>
						</div>
	
						<div class="ladv">
							<a href="#"><img src="images/12ad.jpg" width="205" height="72"
								alt="" /></a>
						</div>
	
						<div class="ladv">
							<a href="#"><img src="images/21af.jpg" width="205" height="72"
								alt="" /></a>
						</div>
	
						<div class="Toplist">
							<div class="Ttitle">
								<h2 class="f-l">热销商品排行榜</h2>
							</div>
							<div class="Topcon">
								<ul>
									<li><a href="#"><img src="images/124ad.jpg" width="58"
											height="58" alt="" /></a>
										<p>
											<a href="#">心相印优选装200抽2层塑装面巾纸</a><br />
											<strong class="red">￥10.9</strong>
										</p></li>
									<li><a href="#"><img src="images/124ad.jpg" width="58"
											height="58" alt="" /></a>
										<p>
											<a href="#">心相印优选装200抽2层塑装面巾纸</a><br />
											<strong class="red">￥10.9</strong>
										</p></li>
									<li><a href="#"><img src="images/124ad.jpg" width="58"
											height="58" alt="" /></a>
										<p>
											<a href="#">心相印优选装200抽2层塑装面巾纸</a><br />
											<strong class="red">￥10.9</strong>
										</p></li>
									<li><a href="#"><img src="images/124ad.jpg" width="58"
											height="58" alt="" /></a>
										<p>
											<a href="#">心相印优选装200抽2层塑装面巾纸</a><br />
											<strong class="red">￥10.9</strong>
										</p></li>
									<li class="last"><a href="#"><img
											src="images/124ad.jpg" width="58" height="58" alt="" /></a>
										<p>
											<a href="#">心相印优选装200抽2层塑装面巾纸</a><br />
											<strong class="red">￥10.9</strong>
										</p></li>
								</ul>
							</div>
						</div>
						<!--Toplist end-->
	
						<div class="Toplist">
							<div class="Ttitle">
								<h2 class="f-l">浏览记录</h2>
								<a style="color: #4484db;" class="f-r" href="#"><b>清除</b></a>
							</div>
							<div class="browselist">
								<ul class="cf">
									<li><a href="#"><img src="images/21da.jpg" width="58"
											height="58" alt="" /></a></li>
									<li><a href="#"><img src="images/21da.jpg" width="58"
											height="58" alt="" /></a></li>
									<li><a href="#"><img src="images/21da.jpg" width="58"
											height="58" alt="" /></a></li>
									<li><a href="#"><img src="images/21da.jpg" width="58"
											height="58" alt="" /></a></li>
									<li><a href="#"><img src="images/21da.jpg" width="58"
											height="58" alt="" /></a></li>
									<li><a href="#"><img src="images/21da.jpg" width="58"
											height="58" alt="" /></a></li>
								</ul>
							</div>
						</div>
						<!--Toplist end-->
	
					</div>
					<!--leftlist end-->
	
					<div class="f-r rightlist">
	
						<div class="hotbox cf">
							<div class="f-l hotcon">
								<h2>热卖推荐</h2>
								<ul class="cf">
									<li><a href="#"><img src="images/21ad.jpg" width="115"
											height="115" alt="" /></a>
										<dl>
											<dt>
												<a href="#">凌仕魅动男士香氛-契合</a>
											</dt>
											<dd>
												特价：<strong class="red">￥52.9</strong>
											</dd>
											<dd>
												<span class="startotal"></span>
											</dd>
											<dd>
												<a class="addcat" href="#">加入购物车</a>
											</dd>
										</dl></li>
									<li><a href="#"><img src="images/214ad.jpg" width="115"
											height="115" alt="" /></a>
										<dl>
											<dt>
												<a href="#">凌仕魅动男士香氛-契合</a>
											</dt>
											<dd>
												特价：<strong class="red">￥52.9</strong>
											</dd>
											<dd>
												<span class="startotal"></span>
											</dd>
											<dd>
												<a class="addcat" href="#">加入购物车</a>
											</dd>
										</dl></li>
								</ul>
							</div>
							<div class="f-l promotion">
								<h2>促销活动</h2>
								<p>指定冰洗买就送插座!液晶电视清仓大放价，小家电惠战十月，最低三大合资空调疯狂抢购</p>
							</div>
						</div>
						<!--hotbox end-->
	
						<div class="retrieve">
							<dl class="cf">
								<dt>品牌：</dt>
								<dd>
									<span><a href="#" class="current">全部</a></span><span><a
										href="#">泰滋泰味(1)</a></span><span><a href="#">金象(3)</a></span><span><a
										href="#">金蝶(6)</a></span><span><a href="#">红水晶(8)</a></span><span><a
										href="#">樱城(5)</a></span>
								</dd>
							</dl>
							<dl class="cf">
								<dt>包装：</dt>
								<dd>
									<span><a href="#" class="current">全部</a></span><span><a
										href="#">全部袋装(19)</a></span>
								</dd>
							</dl>
							<dl class="cf">
								<dt>产地：</dt>
								<dd>
									<span><a href="#" class="current">全部</a></span><span><a
										href="#">全部其他国家和地区(12)</a></span>
								</dd>
							</dl>
							<div class="clear"></div>
						</div>
						<!--retrieve end-->
	
						<div class="product">
							<div class="productsreach">
								<dl>
									<dt>显示：</dt>
									<dd>
										<a class="current" id="imgicon" href="#">图片</a><a id="listicon"
											href="#">列表</a>
									</dd>
								</dl>
								<dl style="margin: 0;">
									<dt>排列：</dt>
									<dd>
										<div id="rankmenu">
											<a href="#">默认排序</a>
											<ul class="cf">
												<li><a href="#">价格高低</a></li>
												<li><a href="#">上架时间</a></li>
											</ul>
										</div>
										<div class="iconsreach">
											<a class="current" id="price" href="#">价格</a><a id="sales"
												href="#">销量</a><a id="discuss" href="#">评论</a>
										</div>
									</dd>
								</dl>
								<dl class="last">
									<dt>筛选：</dt>
									<dd>
										<input type="checkbox" name="" id="cx" /><label for="cx">促销</label>
										<input type="checkbox" name="" id="zp" /><label for="zp">有赠品</label>
										<input type="checkbox" name="" id="xp" /><label for="xp">新品</label>
									</dd>
								</dl>
							</div>
						</div>
						<!--product end-->
	
						<script type="text/javascript">
							$(document).ready(function() {
								$("#rankmenu").hoverClass("current");
							});
						</script>
	
						<div class="productlist">
							<ul>
								<c:forEach items="${requestScope.goodsList }" var="goods" varStatus="stat">
								<!-- 通过前端页面发现数据都放在了li标签中 -->
									<li>
										<a href="#">
										<!-- 判断数据库里是否具有图片的路径 ，如果数据库中存储的是数据库的路径，那么将会加载该路径-->
											<c:choose>
												<c:when test="${goods.listImgPath != null && goods.listImgPath != ''}">
													<img src="${goods.listImgPath }" width="170" height="160" alt="" />
												</c:when>
												<c:otherwise>
													<img src="${rootPath }/images/nopic.gif" width="170" height="160" alt="" />
												</c:otherwise>
											</c:choose>
										</a>
										<dl>
											<dt>
												<a href="#">${goods.name }</a>
											</dt>
											<dd>
												特价：<strong class="red">￥${goods.price }</strong>
											</dd>
											<dd>
												<span class="startotal"></span>
											</dd>
											<dd>
												<a class="addcat" id="usersCarA_${goods.id }" 
												href="${rootPath }/usersCarInsertSubmit.htm?gid=${goods.id }" 
													onclick="return proccedReturnUrl('usersCarA_${goods.id }');">加入购物车</a>
											</dd>
										</dl>
									</li>
								</c:forEach>
							</ul>
						</div>
	
						<div class="clear"></div>
						
						<%--
							上一页下一页始终保留
							
							如果有10页以下:
							1 2 3 4 5 6 7 8 9 10 
							如果有10以上
							1 2 3 4 5 6 7 8 9 10 ... 15(当前页)  ... 333(总页数)
						 --%>
						 ${requestScope.pageInfoUtil.totalRecord }===============
						<div class="pagecon">
							<div class="f-r pagination">
							<%-- 开始设置分页的条件，上一页和下一页，要注重细节
							1：上一页在当前页大于1的时候才可以显示，否则就要设置为disabled
							2：显示的页数要满足如果小于10页，就显示出实际的页数
								<c:set value="10" var="perMaxPage"/>用来设置一个变量，让这个变量代表10这个常量
								当totalPage<perMaxPage的时候，利用begin、end、step、var进行c:foreach循环
								<c:forEach begin="1" end="${requestScope.pageInfoUtil.totalPage }" step="1" var="temp">
							3：当页数大于10，还要考虑以下两种情况
							  	第一：当前页<10,显示出1到10页的数字
							  	第二：当前页>10，显示出第一页、当前页、和最后一页 --%>
							  	<!-- 注意在a标签中传递参数，主要是要根据关键字进行传递，
							  	当进入分类列表的时候，还要根据商品的种类进行传递 -->
								<c:choose>
									<c:when test="${requestScope.pageInfoUtil.currentPage > 1 }">
										<a href="${rootPath }/goods_${goodsCate.url }_${requestScope.pageInfoUtil.prePage }.htm?keyword=${requestScope.keyword}">&lt; 上一页</a>
									</c:when>
									<c:otherwise>
										<span class="disabled">&lt; 上一页</span>
									</c:otherwise>
								</c:choose>
								<%-- 一页显示的最多页数 --%>
								<c:set value="10" var="perMaxPage"/>
								<c:choose>
									<c:when test="${requestScope.pageInfoUtil.totalPage < perMaxPage }">
										<c:forEach begin="1" end="${requestScope.pageInfoUtil.totalPage }" step="1" var="temp">
											<%-- 这段代码要重复使用 
											传递的当前页等于temp的时候，设置该页的样式为class="current"
											其他的页面设置其跳转到controller的方法中进行识别--%>
											<c:choose>
												<c:when test="${requestScope.pageInfoUtil.currentPage == temp }">
													<span class="current">${temp }</span>
												</c:when>
												<c:otherwise>
													<a href="${rootPath }/goods_${goodsCate.url }_${temp}.htm?keyword=${requestScope.keyword}">${temp}</a>
												</c:otherwise>
											</c:choose>
										</c:forEach>
									</c:when>
									<c:otherwise>
									<!-- 当页数大于10，可是当前页小于10的时候 -->
										<%-- 先列出第一页 --%>
										<%--
											当前页如果小于10,列出1.2,3,4,5,6,7,8,9,10
										 --%>
										<c:choose>
											<c:when test="${requestScope.pageInfoUtil.currentPage < perMaxPage }">
												<c:forEach begin="1" end="${perMaxPage }" step="1" var="temp">
													<%-- 这段代码要重复使用 --%>
													<c:choose>
														<c:when test="${requestScope.pageInfoUtil.currentPage == temp }">
															<span class="current">${temp }</span>
														</c:when>
														<c:otherwise>
															<a href="${rootPath }/goods_${goodsCate.url }_${temp}.htm?keyword=${requestScope.keyword}">${temp}</a>
														</c:otherwise>
													</c:choose>
												</c:forEach>
											</c:when>
											
											<c:otherwise>
												<a href="${rootPath }/goods_${goodsCate.url }_1.htm">1</a>
											</c:otherwise>
										</c:choose>
										
										<c:choose>
											<c:when test="${requestScope.pageInfoUtil.currentPage >= perMaxPage}">
												<span class="dian3">...</span>
												<!-- 列出当前页 -->
												<a href="${rootPath }/goods_${goodsCate.url }_${requestScope.pageInfoUtil.currentPage }.htm?keyword=${requestScope.keyword}">${requestScope.pageInfoUtil.currentPage }</a>
											</c:when>
										</c:choose>
										<span class="dian3">...</span>
										<a href="${rootPath }/goods_${goodsCate.url }_${requestScope.pageInfoUtil.totalPage }.htm?keyword=${requestScope.keyword}">${requestScope.pageInfoUtil.totalPage }</a>
									</c:otherwise>
								</c:choose>
								<%-- 当前页 
								<a href="#?page=2">2</a>
								<a href="#?page=3">3</a>
								<a href="#?page=4">4</a>
								<a href="#?page=5">5</a>
								<a href="#?page=6">6</a>
								<a href="#?page=7">7</a>
								 ....(忽略) 
								<span class="dian3">...</span>
								<a href="#?page=199">199</a>
								<a href="#?page=200">200</a>
								--%>
								<a href="${rootPath }/goods_${goodsCate.url }_${requestScope.pageInfoUtil.nextPage }.htm?keyword=${requestScope.keyword}">下一页 &gt; </a>
								<div class="yepage">
									到第<input class="stext" type="text" name="" id="" value="${requestScope.pageInfoUtil.currentPage }" />页
									<input	class="btnimg" type="submit" name="" id="" value="" />
								</div>
							</div>
							<!--pagination end-->
						</div>
	
					</div>
					<!--rightlist end-->
	
					<div class="clear"></div>
	
				</div>
				<!--s_bd end-->
			</div>
			<!--s_bdw end-->
	
			<%@ include file="/common/include/footer.jsp"%>
		</div>
	</body>
</html>